<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猿题库</title>
    <!--重置样式-->
    <link rel="stylesheet" href="./工具文件/重置样式表/reset.css">
    <!--图标字体-->
    <link rel="stylesheet" href="./工具文件/FontAwesome图标字体/css/all.css">
    <link rel="stylesheet" href="./css/yuantiku.css">

    <!--引入工具文件-->
    <link rel="stylesheet" href="./css/swiper.css">
    <script src="./js/transformCSS.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/tweenAnimation.js"></script>
    <script src="./js/touchscroll.js"></script>
    <!--图片占位-->
</head>
<body>
<div id="app">
    <!--头部-->
    <div id="header">
        <!--信息-->
        <div class="info">
            <div class="wrap">
                <div class="time">12:00</div>
                <div class="condition">
                <span>
                    <i class="fas fa-signal"></i>
                </span>
                    <span>
                    <i class="fas fa-wifi"></i>
                </span>
                    <span>
                    <i class="fas fa-battery-full"></i>
                </span>
                </div>
            </div>
        </div>
        <!--标题-->
        <h1 class="title">猿题库</h1>
        <!--搜索框-->
        <div class="search">
            <!--按钮-->
            <a><i class="fas fa-search"></i></a>
            <!--输入框-->
            <input type="text" placeholder="阿里笔试题">
        </div>
    </div>
    <!--主体-->
    <div id="main">
        <!--banner-->
        <div class="banner">
            <!--轮播图-->
            <div id="swiper-container">
                <div class="swiper-wrap">
                    <div class="swiper-slide"><img src="img/banner.png"></div>
                    <div class="swiper-slide"><img src="img/banner.png"></div>
                    <div class="swiper-slide"><img src="img/banner.png"></div>
                    <div class="swiper-slide"><img src="img/banner.png"></div>
                    <div class="swiper-slide"><img src="img/banner.png"></div>
                </div>
            </div>
            <!--分类导航-->
            <ul>
                <li><a><img src="img/1.png"><span>企业</span></a></li>
                <li><a><img src="img/2.png"><span>资讯</span></a></li>
                <li><a><img src="img/3.png"><span>百科</span></a></li>
                <li><a><img src="img/4.png"><span>参考书</span></a></li>
                <li><a><img src="img/5.png"><span>题库</span></a></li>
                <li><a><img src="img/6.png"><span>课程</span></a></li>
                <li><a><img src="img/7.png"><span>找资料</span></a></li>
                <li><a><img src="img/8.png"><span>问师兄</span></a></li>
            </ul>
        </div>
        <!--企业-->
        <ul class="companies">
            <li><a>华为</a></li>
            <li><a>阿里</a></li>
            <li><a>腾讯</a></li>
            <li><a>美团</a></li>
            <li><a>字节跳动</a></li>
            <li ><a>360</a></li>
            <li><a>拼多多</a></li>
            <li><a>小米</a></li>
        </ul>
        <!--分类中心-->
        <div class="professions">
            <div class="head">
                <h2>分类中心</h2>
            </div>
            <ul class="items">
                <li><a>java工程师<img src="./img/p1.png"></a></li>
                <li><a>前端工程师<img src="./img/p1.png"></a></li>
                <li><a>后端工程师<img src="./img/p1.png"></a></li>
                <li><a>运维工程师<img src="./img/p1.png"></a></li>
                <li><a>软件测试<img src="./img/p1.png"></a></li>
                <li><a>架构师<img src="./img/p1.png"></a></li>
            </ul>
        </div>
    </div>
    <!--底部-->
    <nav id="footer">
        <a class="active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a>
            <i class="fas fa-file-alt"></i>
            <span>题库</span>
        </a>
        <a>
            <i class="fas fa-graduation-cap"></i>
            <span>学习</span>
        </a>
        <a>
            <i class="fas fa-globe"></i>
            <span>论坛</span>
        </a>
        <a>
            <i class="fas fa-user-tie"></i>
            <span>我</span>
        </a>
    </nav>
</div>
<script type="text/javascript" src="./js/yuantik.js"></script>
</body>
</html>